<template lang="pug">
  el-form-item(:label="fitem.label" :rules="fitem.rules || []" :prop="fitem.key" v-if="!fitem.hidden")
    el-date-picker(
      v-if="fitem.type === 'daterange' || fitem.type === 'monthrange' || fitem.type === 'date' || fitem.type === 'week' || fitem.type === 'month' || fitem.type === 'year' || fitem.type ==='datetime' || fitem.type ==='datetimerange'"
      v-model="value"
      style="width: 100%"
      :placeholder="fitem.placeholder || '请选择'"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      v-bind="fitem"
    )
    el-time-picker(
      v-else-if="fitem.type === 'timePicker'"
      v-model="value"
      style="width: 100%"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      placeholder="选择时间"
      v-bind="fitem"
    )
    year-range(
      v-else-if="fitem.type === 'yearrange'"
      @yearrangeChange="val => valChange(val)"
    )
    el-cascader(
      v-else-if="fitem.type === 'cascader'"
      v-model="value"
      style="width: 100%"
      v-bind="fitem"
      filterable
    )
    el-select.w(
      v-else-if="fitem.type === 'select'"
      v-model="value"
      placeholder="请选择"
      v-bind="fitem"
    )
      el-option(
        v-for="option in fitem.options"
        :key="option[fitem.props && fitem.props['value'] ? fitem.props['value'] : 'value']"
        :value="option[fitem.props && fitem.props['value'] ? fitem.props['value'] : 'value']"
        :label="option[fitem.props && fitem.props['label'] ? fitem.props['label'] : 'label']"
      )
    el-radio-group(
      v-else-if="fitem.type === 'radio' || fitem.type === 'radiobutton'"
      v-model="value"
      v-bind="fitem"
    )
      radio-child(
        v-for="option in fitem.options"
        :type="fitem.type === 'radio' ? 0 : 1"
        :key="option[fitem.props && fitem.props['value'] ? fitem.props['value'] : 'value']"
        :label="option[fitem.props && fitem.props['value'] ? fitem.props['value'] : 'value']"
        )
       | {{option[fitem.props && fitem.props['label'] ? fitem.props['label'] : 'label']}}
    el-checkbox-group(
      v-else-if="fitem.type === 'checkbox'"
      v-model="value"
      v-bind="fitem"
    )
      el-checkbox(
        v-for="option in fitem.options"
        :key="option[fitem.props && fitem.props['value'] ? fitem.props['value'] : 'value']"
        :label="option[fitem.props && fitem.props['value'] ? fitem.props['value'] : 'value']"
        )
        | {{option[fitem.props && fitem.props['label'] ? fitem.props['label'] : 'label']}}
    el-switch(
      v-else-if="fitem.type === 'switch'"
      v-model="value"
      v-bind="fitem"
    )
    el-autocomplete(
      v-else-if="fitem.type === 'autocomplete'"
      v-model="value"
      placeholder="请输入"
      :fetch-suggestions="(queryString, cb) => autoCompleteSearch(queryString, cb, fitem.options)"
      v-bind="fitem"
    )
    el-transfer(
      v-else-if="fitem.type === 'transfer'"
      v-model="value"
      filter-placeholder="请输入"
      v-loading="fitem.loading || false"
      :titles="fitem.titles || ['可选列表','已选列表']"
      :props="fitem.props || {key:'value'}"
      v-bind="fitem"
    )
    upload-file(
      :filedList.sync="value"
      v-else-if="fitem.type === 'upload'"
      :action="fitem.action || ''"
      v-bind="fitem"
    )
    el-image(
      v-else-if="fitem.type === 'img'"
      :src="fitem.value"
      style="width: 96px;height: 96px;cursor: pointer;"
      fit="fill"
      :preview-src-list="[fitem.value]"
    )
    #editorBox(
      v-else-if="fitem.type === 'editor'"
    )
    el-button(
      v-else-if="fitem.type === 'button'"
      :size="fitem.size || 'small'"
      @click="fitem.clickHandle"
    )
    el-input-number(
      v-else-if="fitem.type === 'number'"
      v-model="value"
      controls-position="right"
      :max="fitem.max || Infinity"
      :min="fitem.min || 0"
      v-bind="fitem"
    )
    router-link(
      class="c_primary"
      v-else-if="fitem.type === 'link'"
      :to="fitem.value"
    ) {{fitem.text}}
    span(v-else-if="fitem.type === 'text'") {{fitem.value}}
    select-dict(
      v-else-if="fitem.type === 'selectdict'"
      :initId.sync="value"
      v-bind="fitem"
      :type="fitem.dictKey"
      @valChange="valChange"
    )
    org-select(
      v-else-if="fitem.type === 'orgselect'"
      :initId.sync="value"
      v-bind="fitem"
      @valChange="valChange"
    )
    ip-input(
      v-else-if="fitem.type === 'ip'"
      :value.sync="value"
      v-bind="fitem"
      @valChange="valChange"
    )
    ul(v-else-if="fitem.type === 'list'")
      li(v-for="el in fitem.value" :key="el") {{el}}
    el-input(
      v-else
      :clearable="true"
      :type="fitem.type || 'text'"
      v-model="value"
      :rows="4"
      :placeholder="fitem.placeholder || `请输入${fitem.label}`"
      v-bind="fitem"
    )
      span(v-if="fitem.suffix" slot="suffix") {{fitem.suffix}}
      span(v-if="fitem.prefix" slot="prefix") {{fitem.prefix}}
    el-image-viewer(
      v-if="previewVisible"
      :on-close="closeViewer"
      :url-list="previewUrl"
    )
    small.c_secondary.ml5(v-if="fitem.help" :style="fitem.helpStyle") {{fitem.help}}
    a.f12(href="javscript:" v-if="fitem.helpHtml" @click="fitem.helpHandle") {{fitem.helpHtml}}
</template>
<script>
import YearRange from './YearRange'
import UploadFile from '../UploadFile'
import SelectDict from './SelectDict'
import OrgSelect from './OrgSelect'
import IpInput from './IpInput'
import E from 'wangeditor'
import Vue from 'vue'
import { dictMixin } from '@/core/mixins'

Vue.component('radioChild', {
  props: {
    type: { type: Number, default: 0 },
    label: { type: String, default: '' }
  },
  render (h) {
    const tag = ['el-radio', 'el-radio-button'][this.type]
    return h(tag, {
      attrs: {
        label: this.label
      }
    }, this.$slots.default)
  }
})

export default {
  name: 'FormItem',
  components: {
    YearRange,
    UploadFile,
    SelectDict,
    OrgSelect,
    IpInput
  },
  mixins: [dictMixin],
  props: {
    type: {
      type: String,
      default: ''
    },
    initialValue: {
      type: [Number, String, Object, Array],
      default: ''
    },
    fitem: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    fitem (val) {
      this.value = val.initialValue
    },
    value (val) {
      if (this.fitem.changeHandle) {
        this.fitem.changeHandle(val)
      }
      this.$emit('changeHandle', { value: val, key: this.fitem.key })
    }
  },
  data () {
    return {
      previewUrl: [],
      previewVisible: false,
      value: this.fitem.initialValue
    }
  },
  mounted () {
    // 富文本编辑器
    if (this.fitem.type === 'editor') {
      const that = this
      const editor = new E('#editorBox')
      editor.config.menus = [
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        'justify',
        'quote',
        'emoticon',
        'table',
        'code',
        'splitLine',
        'undo',
        'redo'
      ]
      // 设置编辑区域高度为 500px
      editor.config.height = this.fitem.height || 300
      // 配置 onchange 回调函数
      editor.config.onchange = function (newHtml) {
        console.log('change 之后最新的 html', newHtml)
        that.value = newHtml
      }
      // 配置触发 onchange 的时间频率，默认为 200ms
      editor.config.onchangeTimeout = 500 // 修改为 500ms
      editor.create()
    }
  },
  methods: {
    // 时间区域输入值改变
    valChange (val) {
      console.log(val)
      this.value = val
    },
    preview (url) {
      if (url) {
        this.previewUrl = [url]
        this.previewVisible = true
      }
    },
    closeViewer () {
      this.previewVisible = false
    },
    // 自动补齐
    autoCompleteSearch (queryString, cb, list) {
      const results = queryString ? list.filter(item => {
        return item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }) : list
      // 调用 callback 返回建议列表的数据
      cb(results)
    }
  }
}
</script>
<style lang="scss" scoped>
.fileinput-button {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  margin-left: -4px;

  .btn {
  }

  input {
    position: absolute;
    cursor: pointer;
    left: 0px;
    top: 0px;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 10000;
    cursor: pointer;
    -ms-filter: 'alpha(opacity=0)';
  }
}
</style>
